<template>
  <div v-infinite-scroll="loadMore"
       :infinite-scroll-disabled="loading"
       :infinite-scroll-distance="10">
    <mt-loadmore :top-method="loadTop" ref="loadmore" :topDistance="50">
    <JL-Navigation :title="'积分记录'"/>

    <div class="fl mt59 ml10">
      <img src="@/assets/imgs/jifenjilu.png">
    </div>
    <div class="content mt15 ml15 pb15">
      <div class="content_top">
        <span class="content_top_text">可用：{{integralNum}}</span>
      </div>
      <div v-for="(item,index) in integralDetail" :key="index">
        <span class="content_text">{{item.JFJE}}</span>
        <span class="content_name_right">{{item.JFLX}}</span>
        <span class="content_text_right">{{item.CZRQ}}</span>
        <hr class="line">
      </div>
      <hr class="line">
    </div>
    </mt-loadmore>
  </div>
</template>

<script>
  export default {
    name: 'IntegralPage',
    data(){
      return {
        integralDetail: [],
        integralNum:0,
        loading: false,
        page_num: 1,
        isEnd: false,
      };
    },
    mounted() {
      this.queryMemberIntegralDetail();
    },
    methods:{
      loadMore() {
        if (this.isEnd) return
        this.loading = true
        this.page_num++
        this.queryMemberIntegralDetail()
      },
      queryMemberIntegralDetail(){
        $Util.loading()
        this.$inbound.invoke({
          interfaceId:'app.member.queryMemberIntegralDetail',
          data:{page_num: this.page_num}})
          .then(msg =>{
            $Util.hideloading()
            this.integralNum = msg['integralNum']

            this.isEnd = false;
            let list = msg['integralDetail'] || [];
            if ($Util.isNull(list)) this.isEnd = true;
            Array.prototype.push.apply(this.integralDetail, list);
            this.loading = false;
            this.$forceUpdate()
          })
          .catch(e =>{
            this.loading = false;
            $Util.hideloading()
            $Util.toast({
              message: e.MESSAGE,
              position: 'middle'
            })
          })
      },
      loadTop() {
        this.page_num = 1
        $Util.loading();
        this.$inbound.invoke({
          interfaceId: 'app.member.queryMemberIntegralDetail',
          data: {page_num: this.page_num}
        })
          .then(msg => {
            $Util.hideloading()
            this.integralNum = msg['integralNum']

            let list = msg['integralDetail'] || [];
            if ($Util.isNull(list)) this.isEnd = true;
            this.integralDetail = {...{}, ...list};
            this.loading = false;
            this.$refs.loadmore.onTopLoaded();
            this.$forceUpdate()

          })
          .catch(e => {
            this.loading = false
            $Util.hideloading()
            $Util.toast({
              message: e.MESSAGE,
              position: 'middle'
            })
          })
      }
    }
  }
</script>

<style scoped>
  .content {
    float: left;
    width: calc(100% - 30px);
    border-radius: 5px;
    box-shadow: 0px 0px 6px #ccc;
  }

  .content_top {
    float: left;
    width: 100%;
    height: 34px;
    background-color: #6996FF;
    border-radius: 5px 5px 0 0;
  }

  .content_top_text {
    float: left;
    font-family: 'pingfang bold';
    font-size: 15px;
    color: #fff;
    line-height: 34px;
    margin-left: 15px;
  }

  .content_text {
    float: left;
    font-family: 'pingfang bold';
    font-size: 18px;
    color: #ff0000;
    margin: 20px 0 0 15px;
    width: calc(100% - 100px);
  }

  .content_name_right {
    float: right;
    font-family: 'pingfang regular';
    font-size: 12px;
    color: #999;
    margin: 15px 15px 0 0;
  }

  .content_text_right {
    float: right;
    font-family: 'pingfang regular';
    font-size: 12px;
    color: #999;
    margin: 5px 15px 0 0;
  }

  .line {
    float: left;
    width: 100%;
    border: 1px solid #f5f5f5;
    margin-top: 10px;
  }

</style>
